<div class="case-edit">
  <div [class.hidden]="model.id" class="module-tips">
    <div *ngIf="model.childrenCount">
      <div class="case-data">
        <div class="row header">用例类型：</div>
        <div *ngFor="let item of casePropValMap.typeId | mapToArray" class="row">
          <ng-container *ngIf="model.childrenCount[item.key]">
            <div class="col-sm-2">{{casePropValMap.typeId[item.key]}}</div>
            <div class="col-sm-10">{{model.childrenCount[item.key]}}个</div>
          </ng-container>
        </div>
      </div>

      <div class="case-data">
        <div class="row header">用例评审：</div>
        <div class="row">
          <div class="col-sm-2">未评审</div>
          <div class="col-sm-10">{{model.childrenCount.notReview}}个</div>
        </div>
        <div class="row">
          <div class="col-sm-2">评审通过</div>
          <div class="col-sm-10 pass">{{model.childrenCount.reviewPass}}个</div>
        </div>
        <div class="row">
          <div class="col-sm-2">评审失败</div>
          <div class="col-sm-10 fail">{{model.childrenCount.reviewFail}}个</div>
        </div>
      </div>
    </div>

    <div class="export">
      <span (click)="exportAll()" class="link">导出用例</span>
    </div>
  </div>

  <div [class.hidden]="!model.id" class="row">
    <form [formGroup]="form" class="my-validate-form small-label">
      <div class="form-group row">
        <label class="col-sm-3 col-form-label"></label>
        <div class="col-sm-9">
          <button (click)="update()" type="button" class="btn btn-info btn-sm" [disabled]="!form.valid">保存</button>
          &nbsp;&nbsp;
          <button prj-privilege [privs]="'test_case:review'" (click)="reviewResult(true)" type="button" class="btn btn-primary btn-sm"
                  [disabled]="!form.valid">评审通过</button>
          <button prj-privilege [privs]="'test_case:review'" (click)="reviewResult(false)" type="button" class="btn btn-warning btn-sm"
                  [disabled]="!form.valid">评审失败</button>

          <label prj-privilege [privs]="'test_case:review'" class="col-form-label form-check-label">
            <input [(ngModel)]="next" formControlName="next" name="next"
                   class="form-check-input form-control-lg" type="checkbox" value="true">
            &nbsp;同时转到下一个
          </label>

        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-3 col-form-label" style="user-select: text;">TC-{{model.id}}</label>
        <div class="col-sm-9">
          <input type="text" class="form-control" name="name" formControlName="name"
                 [(ngModel)]="model.name" #name>
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-3 col-form-label"></label>
        <div class="col-sm-7">
          <div class="tabs-container light">
            <div class="tabs">
              <ngb-tabset  (tabChange)="tabChange($event)">
                <ngb-tab id="content">
                  <ng-template ngbTabTitle>测试步骤</ng-template>
                  <ng-template ngbTabContent></ng-template>
                </ngb-tab>
                <ngb-tab id="summary">
                  <ng-template ngbTabTitle>用例信息</ng-template>
                  <ng-template ngbTabContent></ng-template>
                </ngb-tab>
                <ngb-tab id="history">
                  <ng-template ngbTabTitle>修订历史</ng-template>
                  <ng-template ngbTabContent></ng-template>
                </ngb-tab>
              </ngb-tabset>
            </div>
          </div>
        </div>
        <div class="contentType col-sm-2">
          <div [class.hidden]="tab != 'content'">
            <span *ngIf="model.contentType=='richText'" (click)="changeContentType('steps')" class="link">
              <i class="fa fa-th"></i>
              切换到表格
            </span>
            <span *ngIf="model.contentType=='steps'" (click)="changeContentType('richText')" class="link">
              <i class="fa fa-file-text-o"></i>
              切换到富文本
            </span>
          </div>
        </div>
      </div>

      <div [class.hidden]="tab != 'content'" class="tab-steps form-group row">
        <div [class.hidden]="'richText'!=model.contentType" class="col-sm-12">
          <tiny-mce [content]="model.content" [height]="'300px'"
                    (changed)="onChange($event)"></tiny-mce>

        </div>

        <div [class.hidden]="'steps'!=model.contentType" class="col-sm-12">
          <steps-table [settings]="settings" [source]="model.steps"

                       (upConfirm)="onUpConfirm($event)"
                       (downConfirm)="onDownConfirm($event)"

                       (createConfirm)="onCreateConfirm($event)"
                       (saveConfirm)="onSaveConfirm($event)"
                       (deleteConfirm)="onDeleteConfirm($event)"
          ></steps-table>
        </div>
      </div>

      <div [class.hidden]="tab != 'summary'" class="tab-summary">
        <div class="form-group row">
          <label class="col-sm-3 col-form-label"><span>测试类型</span></label>
          <div class="col-sm-9">
            <select [(ngModel)]="model.typeId" formControlName="type" class="form-control" name="type">
              <option *ngFor="let item of casePropMap['typeId']" value="{{item.id}}">{{item.label}}</option>
            </select>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-3 col-form-label"><span>优先级</span></label>
          <div class="col-sm-9">
            <select [(ngModel)]="model.priorityId" formControlName="priority" class="form-control" name="priority">
              <option *ngFor="let item of casePropMap['priorityId']" value="{{item.id}}">{{item.label}}</option>
            </select>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-3 col-form-label"><span>耗时(分钟)</span></label>
          <div class="col-sm-9">
            <input type="text" class="form-control" name="estimate" formControlName="estimate"
                   [(ngModel)]="model.estimate" #estimate>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-sm-3 col-form-label"><span>测试目的</span></label>
          <div class="col-sm-9">
              <textarea maxlength="1000" type="text" class="form-control" name="objective" formControlName="objective"
                        [(ngModel)]="model.objective" #objective></textarea>
          </div>
        </div>

        <ng-container *ngIf="model.id">
          <ng-container *ngFor="let field of customFields; let i = index;">
              <case-field-edit [form]="form" [model]="model"
                                 [elem]="field" [validateMsg]="validateMsg"></case-field-edit>
          </ng-container>
        </ng-container>
      </div>

      <div [class.hidden]="tab != 'history'" class="tab-history">
        <div class="activity">
          <div class="list">
            <div *ngFor="let his of model.histories; let i = index;" class="item">
              <div class="descr">
                <span [innerHTML]="his.title" class="content"></span> -
                <span>{{his.createTime | date:'y/MM/dd HH:mm:ss'}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="form-group row">
        <div class="col-sm-12">
          <file-uploader (uploadedEvent)="uploadedEvent($event)"
                         [ifile]="model.testsetPath" [mimeType]="[]" [showDropZone]="false"></file-uploader>
        </div>
      </div>

      <comment-list [model]="model" [modelType]="'case'"></comment-list>

      <div class="form-group row">
        <label class="col-sm-3 col-form-label"></label>
        <div class="col-sm-9">
          <div class="validate-errors">
            <div class="validate-error" *ngFor="let msg of formErrors">
              <div>{{ msg }}</div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>

</div>

<ng2-toasty></ng2-toasty>
